<template>
  <div class="notifications">
    <div class="title">订单中心</div>
    <div class="content">
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getData"
        >
          <Card
            v-for="notice in noticelist"
            :key="notice.id"
            :data="notice"
            :userData="userData"
            @update="update"
          />
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderList } from "@/api/goodslist";
import { transformTimestamp } from "@/tools/utils";
import Card from "./components/Card.vue";
export default {
  name: "Notifications",
  data() {
    return {
      loading: false,
      finished: false,
      noticelist: [],
      curPage: 1,
      pageSize: 10,
      flot: false,
      total: 0,
      userData: {},
    };
  },
  components: {
    Card,
  },
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {
    this.userData = JSON.parse(localStorage.getItem("userData"));
    this.getData();
  },
  methods: {
    update() {
      this.curPage = 1;
      this.noticelist = [];
      this.getData();
    },
    getData() {
      this.loading = false;

      if (this.flot) {
        return;
      }
      this.flot = true;
      this.loading = true;
      getOrderList({
        currPage: this.curPage,
        pageSize: this.pageSize,
        user_id: this.userData.id,
      })
        .then((res) => {
          this.curPage = this.curPage + 1;
          this.noticelist = [
            ...this.noticelist,
            ...res.data.map((item) => {
              return {
                ...item,
                lease_time: transformTimestamp(item.lease_time),
                create_time: transformTimestamp(item.create_time),
                update_time: transformTimestamp(item.update_time),
              };
            }),
          ];
          console.log(res);
          this.total = res.count;
          if (this.noticelist.length >= res.count) {
            this.finished = true;
          }
          this.flot = false;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
